4. Sizing (Width & Height)
1. Width using numbers (like w-1 for 4px)
2. Percentage (like w-1/2 for 50%)
w-full == 100%
w-1/2 == 50%
w-1/3 == 33.333%
w-2/4 == 50%
w-3/4 == 75%
3. Max width (max-w-lg == 512px)
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo sapiente neque tempore odio rerum! Vero eveniet fuga iure laborum quas quisquam aliquid, ex animi sequi tenetur, ab vitae, doloremque nemo sit cum eum! Maxime animi ea excepturi repellendus, illo magni deleniti eius aut reiciendis numquam minus eligendi quo repudiandae id non magnam cumque molestiae. Obcaecati iste amet ducimus dolorem ipsum incidunt! Pariatur eos numquam, a soluta at autem assumenda fugit veniam aliquid cum iusto adipisci? Consectetur non corrupti reiciendis perspiciatis modi adipisci quae! Quis praesentium nisi omnis, illo possimus, vero quia dignissimos deleniti repudiandae, libero corrupti. Unde magni quidem accusantium.
4. VW & Width 100%
w-screen == width: 100vw;
w-full == width: 100%
5. Arbitrary Width
Arbitrary Width w-[500px]
6. Width Auto
w-auto (Width Auto)
7. Height
h-16
h-24
h-32
h-40
Arbitrary height h-[3in]
8. Min Height Full (min-height: 100%;)
min-h-full (first remove padding from parent to see effect)
9. Max Height Full (max-height: 100%;)
10. Full screen height(max-height: 100%;)
h-screen (height: 100vh;)